<template>
    <div class="scroll_top el-icon-arrow-up primary_deep3_color" @click="top">
    </div>
</template>
<script>
export default {
    name: "ScrollTop",
    methods: {
        // 回到顶部
        top() {
            let el = this.$parent.$refs.el;
            let timer = setInterval(() => {
                if (el.scrollTop - 100 < 0) {
                    el.scrollTop = 0
                    clearInterval(timer)
                } else {
                    el.scrollTop -= 100
                }
            },10)
        }
    }
}
</script>
<style lang="scss" scoped>
.scroll_top {
    position: absolute;
    width: 35px;
    height: 35px;
    line-height: 28px;
    text-align: center;
    border-radius: 50%;
    color: white;
    right: 0px;
    bottom: 0px;
    font-size: 20px;
    box-shadow: 0 0 10px -5px #000;
    margin: 0 50px 50px 0;
    transition: 0.3s;
}

.scroll_top:hover{
    transform: scale(1.02);
    cursor: pointer;
}
</style>